簡介:課程分為二個實例講解,第一個實例用純CSS3代替JavaScript實現(xiàn)按鈕動畫效果,并詳細講解CSS3新增的transition、transform等屬性。第二個實例重點介紹利用<a>標簽制作自適應寬度的圓角按鈕。
第1章 CSS3實現(xiàn)“幽靈按鈕”特效
通過分析幽靈按鈕的實現(xiàn)原理,使用純CSS3代替JavaScript實現(xiàn)動畫效果,分析講解動畫的實現(xiàn)方法,并詳細講解CSS3新增的transition、transform等屬性。
- 視頻: 1-1 課程簡介 (01:40)
- 視頻: 1-2 html結(jié)構制作 (08:38)
- 視頻: 1-3 漸變旋轉(zhuǎn)放大動畫(上) (08:17)
- 視頻: 1-4 漸變旋轉(zhuǎn)放大動畫(下) (11:28)
- 視頻: 1-5 按鈕樣式及基本動畫實現(xiàn) (14:47)
- 視頻: 1-6 從左到右線條動畫實現(xiàn) (18:06)
- 視頻: 1-7 從上到下線條動畫實現(xiàn) (04:46)
- 視頻: 1-8 從下到上線條動畫實現(xiàn) (03:22)
- 視頻: 1-9 從右到左線條動畫實現(xiàn) (03:45)
- 視頻: 1-10 提示框樣式制作 (13:27)
- 視頻: 1-11 jq實現(xiàn)提示框內(nèi)容顯示 (18:35)
- 視頻: 1-12 動畫連續(xù)播放bug解決 (03:07)
第3章 用 a 標簽制作按鈕
重點講解如何用<a>標簽制作圓角水晶按鈕。主要是告訴你如何才能給普通按鈕簽貼上兩邊圓角,如何進行貼圖,交互效果如何實現(xiàn)。
第4章 CSS3新增的圓角屬性
詳細講解用CSS3中的新屬性(Border-radius)來制作圓角水晶按鈕。